<template>
  <el-sub-menu v-if="menu.children.length" :index="menu.index">
    <template #title>
      <el-icon class="title-icon">
        <span class="icon" :class="menu.iconClass">{{ menu.label[0] }}</span>
      </el-icon>
      <span>{{ menu.label }}</span>
    </template>
    <template v-for="(child, i) in menu.children">
      <MenuTree :menu="child"></MenuTree>
    </template>
  </el-sub-menu>
  <el-menu-item v-else :index="menu.index">
    <el-icon class="title-icon">
      <span class="icon" :class="menu.iconClass">{{ menu.label[0] }}</span>
    </el-icon>
    <span>{{ menu.label }}</span>
  </el-menu-item>
</template>
<style lang="scss" scoped>
.icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  // background: #f3f3f3;
  background: #e1e1e1;
  font-size: 12px;
  border-radius: 4px;
}
</style>
<script setup lang="ts">
import { IMenuItem } from "@/interface";
defineProps<{
  menu: IMenuItem;
}>();
</script>
